<template>
	<div class="mt-2">
		<div class="flex items-center text-t-3">
			<base-icon name="data" size="20"></base-icon>
			<div class="ml-1">{{ $t('casinoProfile.title') }}</div>
		</div>
		<div class="mt-2 grid gap-2 grid-cols-2">
			<up-stats-item
				img="slots/profile/count"
				title-t="slotsProfile.bettingCount"
				:value="casinoBetCount"></up-stats-item>
			<up-stats-item
				img="slots/profile/totalAmount"
				title-t="slotsProfile.betAmount"
				:value="casinoBetAmount"
				type="amount"></up-stats-item>
			<up-stats-item
				img="slots/profile/winCount"
				title-t="slotsProfile.winCount"
				:value="casinoWinCount"></up-stats-item>
			<up-stats-item
				img="slots/profile/maxWin"
				title-t="slotsProfile.maxPayout"
				:value="casinoMaxPayout"
				type="amount"></up-stats-item>
			<up-stats-item
				img="slots/profile/avgWin"
				title-t="slotsProfile.avgWinAmount"
				:value="casinoAverageWinAmount"
				type="amount"></up-stats-item>
			<up-stats-item
				img="slots/profile/avgAmount"
				title-t="slotsProfile.avgBetAmount"
				:value="casinoAverageBetAmount"
				type="amount"></up-stats-item>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, Ref, inject, watch } from 'vue'
import { BaseIcon } from '@/components/base'
import { UpStatsItem } from '@/components/up'
import { getCasinoStatistic } from '@/api/casino'

// const isMe = inject<Ref<boolean>>('isMe')

const userId = inject<Ref<string>>('userId')

const casinoBetCount = ref()
const casinoBetAmount = ref()
const casinoWinCount = ref()
const casinoMaxPayout = ref()
const casinoAverageBetAmount = ref()
const casinoAverageWinAmount = ref()

const getStatisticData = async () => {
	try {
		const { data } = await getCasinoStatistic({
			uid: userId!.value
		})
		const { betCount, totalBetAmount, winCount, maxPayout, avgWinAmount, averageBetAmount } = data
		casinoBetCount.value = betCount || 0
		casinoBetAmount.value = totalBetAmount || 0
		casinoWinCount.value = winCount || 0
		casinoMaxPayout.value = maxPayout || 0
		casinoAverageWinAmount.value = avgWinAmount || 0
		casinoAverageBetAmount.value = averageBetAmount || 0
	} catch (error) {}
}

// getStatisticData()

watch(
	() => userId?.value,
	() => {
		if (userId?.value) {
			getStatisticData()
		}
	},
	{
		immediate: true
	}
)
</script>
